<template>
  <div class="contentItem">
    <video
      ref="video"
      width="800"
      height="328"
      id="videoId"
      class="video-js vjs-big-play-centered vjs-fluid"
      controls
      preload="auto"
      autoplay
    >
      <!-- <source type="rtmp/mp4" src="rtmp://live.hkstv.hk.lxdns.com/live/hks2" /> -->
    </video>
  </div>
</template>

<script>
import "videojs-flash";
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
  data() {
    return {
      playerOptions: {
        // height: "100",
        width: "150",
        sources: [
          {
            type: "rtmp/flv",
            src: "rtmp://58.200.131.2:1935/livetv/cetv1",
          },
        ],
        techOrder: ["flash", "html5"],
        autoplay: false,
        controls: true,
        poster: "../../assets/images/1670512795526.jpg",
      },
    };
  },

  mounted() {
    this.initVideo("rtmp://58.200.131.2:1935/livetv/cetv1");
  },
  methods: {
    // 该方法在 methods 中定义，在获取到数据后调用，index 为组件中绑定的动态 id；url 为视频地址
    initVideo(url) {
      this.$nextTick(() => {
        let myPlayer = videojs(document.getElementById(`videoId`), {
          sources: [
            {
              type: "rtmp/mp4",
              src: "rtmp://live.hkstv.hk.lxdns.com/live/hks2",
            },
          ],
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: false,
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          // width: "800px",
          //设置视频播放器的显示高度（以像素为单位）
          // height: "400px",
          playbackRates: [0.5, 1, 1.5, 2, 3], // 倍速播放
          controlBar: {
            playToggle: true,
          },
        });
        myPlayer.src(url); // 重新初始化URL
      });
    },
  },
};
</script>
